<template>
<!--  :class="Vuex.isDarkMode.value?'slider-ssms':'slider-qsms'"-->
  <div class="slider-container" :class="Vuex.isDarkMode.value?'ba_shenhui':'ba_qianhui'"
       @mouseup="onMouseUp" @mouseleave="onMouseUp">
    <div class="progress-bar" :style="{ width: progressWidth + '%' }"></div>
    <div
        class="slider jz_flex xt" style="font-size: 12px"
        :style="{ left: `${sliderPosition}px` }"
        @mousedown="onMouseDown"
        :class="{ fixed: isFixed }"
    >
      <el-icon style="color: black"><ArrowRight /></el-icon>
      <el-icon style="color: black"><ArrowRight /></el-icon>
    </div>
    <span class="slider-title">{{ title }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue';
import {storeToRefs} from "pinia";
import {storeVuex} from "@/store/modules/user";

const emit = defineEmits(["siderValue"])
const Vuex = storeToRefs(storeVuex())

import {ArrowRightBold,ArrowRight} from '@element-plus/icons-vue'
import {hColgroup} from "element-plus/es/components/table/src/h-helper";
import props = hColgroup.props;
    const title = ref<string>('滑动以验证');
    const sliderPosition = ref(0);
    const progressWidth = ref(0);
    const isDragging = ref(false);
    const isFixed = ref(false); // 新增是否固定的状态
    const sliderWidth = 50; // 滑块的宽度
    const containerWidth = ref(0); // 父级容器的宽度

    const onMouseDown = (event:any) => {
      if (!isDragging.value && !isFixed.value) { // 只能在未固定状态下拖动
        isDragging.value = true;
        window.addEventListener('mousemove', onMouseMove);
      }
    };

    const onMouseMove = (event:any) => {
      const container = document.querySelector('.slider-container');
      if (container) {
        containerWidth.value = container.clientWidth;

        // 计算新的位置
        let newPosition = event.clientX - container.getBoundingClientRect().left - sliderWidth / 2;

        // 限制滑块在容器内移动
        newPosition = Math.max(0, Math.min(newPosition, containerWidth.value - sliderWidth));

        // 更新滑块位置和进度条宽度
        sliderPosition.value = newPosition;
        progressWidth.value = (newPosition / (containerWidth.value - sliderWidth)) * 100;

        // 如果到达90%的位置，则锁定滑块
        if (progressWidth.value >= 90) {
          sliderPosition.value = containerWidth.value - sliderWidth; // 固定在最右侧
          progressWidth.value = 100;
          isFixed.value = true; // 设置为固定状态
          title.value = '验证成功'
          onMouseUp(); // 取消拖动
          // 使用 $emit 触发事件并传递值给父组件
          emit('siderValue',isFixed.value);
        }
      }
    };

    const onMouseUp = () => {
      isDragging.value = false;
      window.removeEventListener('mousemove', onMouseMove);
      // 在释放鼠标时，如果未固定，则将滑块回弹
      if (!isFixed.value) {
        // 添加动画效果（使用 setTimeout 延迟执行，确保动画平滑）
        setTimeout(() => {
          sliderPosition.value = 0;
          progressWidth.value = 0;
        }, 0); // 通过使用 setTimeout 实现平滑动画效果
      }
    };

    // 清理工作
    onBeforeUnmount(() => {
      window.removeEventListener('mousemove', onMouseMove);
    });

</script>

<style scoped>
.ba_shenhui{
  border: 1px solid #4c4d4f;
}
.ba_qianhui{
  border: 1px solid #dcdfe6;
}
.slider-title{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  font-size: 12px;
  transform: translate(-50%, -50%);
  color: white;
}
.slider-ssms{
  border: 1px solid #4c4d4f;
}
.slider-ssms .slider{
  background-color: #2e3033;
}
.slider-qsms{
  background-color: #999da2;transition: width 0.5s ease; /* 进度条的过渡效果 */
}
.slider-container {
  position: relative;
  width: 100%;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #4e69fd;
}

.progress-bar {
  position: absolute;
  height: 100%;
  background-color:#57d188;
  padding-left: 5px;
  top: 0;
  left: 0;
}

.slider {
  position: absolute;
  height: 100%;
  width: 50px; /* 滑块的宽度 */
  background-color: #f4f3f3;
  border-radius:2px;
  cursor: pointer;
  user-select: none;
  z-index: 10;
}

.slider.fixed {
  cursor: default; /* 固定时禁用光标变化 */
}
</style>
